import React, { useEffect } from 'react'
import style from './style.module.scss'
import { useRecoilState } from 'recoil'
import { RelatedTagsMock } from './mock'
import TagCard from '../../Card/TagCard'
import BaseLayout from '../../_Layout/BaseLayout'

interface IRelatedTagsProps {
    tags: any
}

export default function RelatedTags(props: IRelatedTagsProps) {
    const [relatedTags, setRelaterTags] = useRecoilState(RelatedTagsMock)

    useEffect(() => {
        setRelaterTags(props.tags)
    }, [props.tags])

    return (
        <BaseLayout>
            <div className={style.container}>
                {relatedTags.map((item, index) => {
                    return <TagCard data={item} key={index} />
                })}
            </div>
        </BaseLayout>
    )
}
